<page-header-wrapper [title]="'开票信息'" [logo]="logo">
  <ng-template #logo>
    <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
      <i nz-icon nzType="left" nzTheme="outline"></i>
    </button>
  </ng-template>
</page-header-wrapper>

<nz-card class="statistics-box">
  <div nz-row nzGutter="8">
    <div nz-col [nzXl]="10" [nzLg]="10" [nzSm]="12" [nzXs]="12" se-container [labelWidth]="100" col="1">
      <se label="销售方">
        {{ headerInfo?.ltdName }}
      </se>
      <se label="申请编号">
        {{ headerInfo?.vatappHCode }}
      </se>
      <se label="发票号码">
        {{ headerInfo?.invoiceno }}
      </se>
      <se label="发票代码">
        {{ headerInfo?.invoiceno2 }}
      </se>
      <se label="开票日期">
        {{ headerInfo?.invoicedate }}
      </se>
      <se label="价税合计">
        {{ headerInfo?.vatmoney | currency }}
      </se>
      <se label="税额">
        {{ headerInfo?.vattax | currency }}
      </se>
      <se label="票面备注">
        {{ headerInfo?.remarks }}
      </se>
    </div>
    <div nz-col [nzXl]="10" [nzLg]="10" [nzSm]="12" [nzXs]="12" se-container [labelWidth]="100" col="1">
      <se label="购买方">
        {{ headerInfo?.artoname }}
      </se>
      <se label="纳税号">
        {{ headerInfo?.artotaxno }}
      </se>
      <se label="地址">
        {{ headerInfo?.artoadd }}
      </se>
      <se label="电话">
        {{ headerInfo?.artotel }}
      </se>
      <se label="开户行">
        {{ headerInfo?.artobank }}
      </se>
      <se label="银行账户">
        {{ headerInfo?.artoacc }}
      </se>
      <se label="其他要求">
        {{headerInfo?.otherremarks || '-'}}
      </se>
    </div>
    <div *ngIf="isCanEdit && selectedIndex===2" nz-col [nzXl]="4" [nzLg]="4" [nzSm]="12" [nzXs]="12" class="text-right">
      <ng-container *ngIf="isEdit; else elseTemplate">
        <button nz-button (click)="isEdit = false; invoiceST?.load(1)">取消</button>
        <button nz-button nzType="primary" (click)="saveInvoices()">保 存</button>
      </ng-container>
      <ng-template #elseTemplate>
        <button nz-button nzType="primary" (click)="isEdit = true">修改</button>
      </ng-template>
    </div>
  </div>
</nz-card>

<nz-card class="search-box" nzBordered>
  <nz-tabset [(nzSelectedIndex)]="selectedIndex">
    <nz-tab nzTitle="订单明细">
      <div nz-row nzGutter="8" class="mb-md">
        <div nz-col [nzXl]="18" [nzLg]="24" [nzSm]="24" [nzXs]="24">
          <sf #orderSf [schema]="orderSchema"
            [ui]="{ '*': { spanLabelFixed: 90, grid: { lg: 8, md: 12, sm: 12, xs: 24 } } }" [compact]="true"
            [button]="'none'"></sf>
        </div>
        <div nz-col [nzXl]="6" [nzLg]="24" [nzSm]="24" [nzXs]="24" class="text-right">
          <button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="orderST?.load(1)">查询</button>
          <button nz-button (click)="resetSF(1)">重置</button>
          <button nz-button (click)="exportList()"> 导出</button>
        </div>
      </div>

      <st #orderST [scroll]="{ x: '1200px' }" [data]="service.$api_get_invoice_order_detail" [columns]="orderColumns"
        [page]="{}" size="small" bordered="true" [req]="{ process: beforeReq }" [loading]="false"
        [scroll]="{ x: '1200px', y: '250px' }"></st>
    </nz-tab>
    <nz-tab nzTitle="费用明细">
      <div nz-row nzGutter="8" class="mb-md">
        <div nz-col [nzXl]="18" [nzLg]="24" [nzSm]="24" [nzXs]="24">
          <sf #costSf [schema]="costSchema"
            [ui]="{ '*': { spanLabelFixed: 90, grid: { lg: 8, md: 12, sm: 12, xs: 24 } } }" [compact]="true"
            [button]="'none'"></sf>
        </div>
        <div nz-col [nzXl]="6" [nzLg]="24" [nzSm]="24" [nzXs]="24" class="text-right">
          <button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="costST?.load(1)">查询</button>
          <button nz-button (click)="resetSF(2)">重置</button>
          <!-- <button nz-button> 导出</button> -->
        </div>
      </div>

      <st #costST [data]="service.$api_get_invoice_cost_detail" [columns]="costColumns" size="small" bordered="true"
        [page]="{}" [req]="{  process: beforeReq }" [loading]="false" [scroll]="{ x: '1200px', y: '250px' }">
        <ng-template st-row="vatmoney" let-item let-index="index">
          {{ item.billLTypeLabel }}: {{ item.vatmoney |currency }}
        </ng-template>
      </st>
    </nz-tab>
    <nz-tab nzTitle="发票明细">
      <st #invoiceST [data]="service.$api_get_invoice_details" [columns]="invoiceColumns" size="small" bordered="true"
        [page]="{}" [req]="{ process: beforeReq }" [loading]="false" [scroll]="{ x: '1200px', y: '250px' }">
        <ng-template st-row="vatnameLabel" let-item let-index="index">
          <nz-select *ngIf="isEdit" [ngModel]="item.vatname"
            (ngModelChange)="invoiceST.setRow(index, { vatname: $event })" style="width: 100%">
            <nz-option [nzValue]="item.value" [nzLabel]="item.label" *ngFor="let item of services"></nz-option>
          </nz-select>
          <ng-container *ngIf="!isEdit">{{ item.vatnameLabel || item.vatname }}</ng-container>
        </ng-template>
        <ng-template st-row="vatmodel" let-item let-index="index">
          <input *ngIf="isEdit" nz-input [ngModel]="item.vatmodel"
            (ngModelChange)="invoiceST.setRow(index, { vatmodel: $event })" />
          <ng-container *ngIf="!isEdit">{{ item.vatmodel }}</ng-container>
        </ng-template>
        <ng-template st-row="vatunit" let-item let-index="index">
          <input *ngIf="isEdit" nz-input [ngModel]="item.vatunit"
            (ngModelChange)="invoiceST.setRow(index, { vatunit: $event })" />
          <ng-container *ngIf="!isEdit">{{ item.vatunit }}</ng-container>
        </ng-template>
        <ng-template st-row="vatqty" let-item let-index="index">
          <input *ngIf="isEdit" nz-input [ngModel]="item.vatqty" type="number"
            (ngModelChange)="invoiceST.setRow(index, { vatqty: $event })" />
          <ng-container *ngIf="!isEdit">{{ item.vatqty }}</ng-container>
        </ng-template>
      </st>
    </nz-tab>
    <nz-tab nzTitle="快递轨迹">
      <p style="font-weight: 600">顺丰快递: {{ routesInfo?.mailNo }} <nz-tag [nzColor]="'#2db7f5'" class="ml-md">已签收
        </nz-tag>
      </p>
      <app-logistics-time-line [data]="routesInfo?.routes"></app-logistics-time-line>
    </nz-tab>
  </nz-tabset>
</nz-card>